<template>
  <div class="service-card-con">
    <a-row :key="'service-card-item-'+index" :class="[' card-row ', index < dataList.length-1 ?' card-row-border-bottom ':''].join('') " :gutter="10" v-for="(item,index) in dataList">
      <a-col v-bind="rowColConfig.col1">
        <div class="col-con">
          <img :src="item.url" :alt="item.title" style="width: 140px; height: 140px;">
        </div>
      </a-col>
      <a-col v-bind="rowColConfig.col2">
        <div class="col-con title">
          {{item.title}}
        </div>
      </a-col>
      <a-col v-bind="rowColConfig.col3">
        <div class="col-con">
          <span class="value">{{item.value}}</span>
          <span class="unit">{{item.unit}}</span>
        </div>
      </a-col>
      <a-col v-bind="rowColConfig.col4">
        <div class="col-con desc">
          <div class="title">{{item.descTitle}}</div>
          <div class="cont">{{item.desc}}</div>
        </div>
      </a-col>
      <a-col v-bind="rowColConfig.col5">
        <div class="col-con">
          <a-button v-has="'es_entpr:click:sqfw'" @click="gotoEvent(item,index)" type="primary">申请服务</a-button>
        </div>
      </a-col>
    </a-row>



    <!-- 当前页面公共弹框 -->
    <a-modal v-model="winConfig.visible" :title="winConfig.title" :footer="null" :width="700">
      <!-- <component :is="winConfig.componentName" ></component> -->
    </a-modal>
  </div>
</template>

<script>
// xs <576px sm ≥576px  md ≥768px lg ≥992px xl ≥1200px  xxl ≥1600px
// :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"
// { xxl: 10, xl:12 }
// 服务类型 1005-银行开户 1006-工商注册信息变更 1007-企业注销 1008-变更纳税模式
const opTypeList = {
  "银行开户":"1005",
  "工商注册信息变更":"1006",
  "企业注销":"1007",
  "纳税模式变更":"1008",
  "其他增值服务":"1019",
}
export default {
  name:'ServiceCard',
  props:{
    btnEvent:{type:Function}
  },
  data(){
    return {
      rowColConfig:{
        col1:{ xxl: 2, xl:3 },
        col2:{ xxl: 4, xl:5 },
        col3:{ xxl: 2, xl:3 },
        col4:{ xxl: 14, xl:10 },
        col5:{ xxl: 2, xl:3 },
      },
      dataList:[
        // {index:'0', url:require('@/assets/service/service_01.svg'), title:'银行开户', value:'1000', unit:'元/户起', descTitle:'服务介绍', desc:'客户可以根据个人需求，及开户相关要求，自由选择办理招商银行、浦发银行等各大行企业一般户，办理周期一般在3-7个工作日。', btnAction:''},
        { index:'1', url:require('@/assets/service/service_02.svg'), title:'工商注册信息变更', value:'500', unit:'元/次起', descTitle:'服务介绍', desc:'根据经营者需求进行工商注册信息变更，如工商名称、经营范围、经营者电话号码、注册资金等信息变更，变更办理周期一般在2-3个工作日。', btnAction:''},
        { index:'2', url:require('@/assets/service/service_03.svg'), title:'纳税模式变更', value:'500', unit:'元/次起', descTitle:'服务介绍', desc:'根据经营者需求进行税务核定方式进行变更，一般本季度办理，下季度生效，变更办理周期一般在5-7个工作日', btnAction:''},
        { index:'3', url:require('@/assets/service/service_04.svg'), title:'企业注销', value:'200', unit:'元起', descTitle:'服务介绍', desc:'针对结束业务模式且符合简易注销条件的注册户进行税务及工商注销，个体户注销办理周期一般在4-5个工作日，个人独资企业注销办理周期一般在25个工作日。', btnAction:''},
        { index:'4',  url:require('@/assets/service/service_05.svg'), title:'其他增值服务', value:'200', unit:'元起', descTitle:'服务介绍', desc:'个性化服务，可根据您的实际经营情况选择相应服务！', btnAction:''},
      ],
      winConfig:{
        visible:false,
        componentName:'',
      },
    }
  },
  methods: {
    gotoEvent(item,index){
      const code = opTypeList[item.title]
      this.btnEvent(item,item.index,code)
    }
  }
}
</script>

<style lang="less">
.service-card-con{
  width: 100%;
  // display: flex;
  // justify-content: flex-end;
  // align-items: center;
  // flex-direction: column;
  .card-row{
    height: 200px;
    margin: 10px;
    padding: 10px 0;
    &.card-row-border-bottom{
      border-bottom: 1px solid #cccccc;
      padding-bottom: 20px;
    }
    .ant-col{
      height: 100%;
      .col-con{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        &.title{
          //font-size: 20px;
          font-size: 18px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 30px;
        }
        .value{
          color: #4266E5;
          padding: 5px 5px;
        }
        .unit{
          color: #c1c1c1;
          padding: 5px 0px;
        }
        &.desc{
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-direction: column;
          overflow: hidden;
          .title{
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            margin: 5px;
          }
          .cont{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            margin: 5px;
            overflow: auto;
          }
        }
      }
    }
  }

}
</style>
